<template>

	<div>
		<!-- <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item >
                    <i class="el-icon-pie-chart"></i> 数据呈现图表
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div> -->
		<!-- <div class="container"> -->
		<div>
			<el-row :gutter="20">
				<el-col :span="5">
					<div class="grid-content bg-purple">实时温度：{{ temp}}℃</div>
				</el-col>
				<!-- 				  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
				  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> -->
				<!-- <el-col :span="8">
					<div class="grid-content bg-red">最新异常数据：{{abnormal}}℃ 时间点为：{{time}}</div>
				</el-col> -->
			</el-row>
		</div>
		<div style="height: 450px;" ref="chartContainer">

		</div>

		<div>
			<el-row :gutter="20">
				<el-col :span="5">
					<div class="grid-content bg-purple">平均温度：{{ average}}℃</div>
				</el-col>
				<el-col :span="10">
					<div class="grid-content bg-purple">根据过去十组数据预测下一个温度： {{ nxttemp}}℃</div>
				</el-col>
			</el-row>
		</div>
		
	</div>

</template>

<script>
	import * as echarts from 'echarts';
	import {
		gettemhum,
		getthmhistory,
		gettempnext,
	} from '../../api/index';
	import Schart from 'vue-schart';
	export default {
		// name: 'basecharts',
		components: {
			Schart
		},
		data() {
			return {
				nxttemp:'',
				nextdata: '',
				chartContainer: null,
				time: 'xx:xx:xx',
				message: '自动',
				abnormal: '--',
				temp: '',
				average: 0,
				count: 0,
				option: {
					color: 'green',
					title: {
						text: '温度数据图表'
					},
					tooltip: {
						trigger: 'axis'
					},
					// legend: {},

					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
					},
					yAxis: {
						type: 'value',
						axisLabel: {
							formatter: '{value} ℃'
						}
					},
					series: [{
							name: 'Highest',
							type: 'line',
							data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
							markPoint: {
								data: [{
										type: 'max',
										name: 'Max'
									},
									{
										type: 'min',
										name: 'Min'
									}
								]
							},
							markLine: {
								data: [{
									type: 'average',
									name: 'Avg'
								}]
							}
						},

					]
				},
			};
		},
		created() {
			// 在组件创建时启动轮询
			this.startPolling();
		},
		// beforeDestroy() {
		//    // 在组件销毁前停止轮询
		//    this.stopPolling();
		// },
		mounted() {
			this.init();
			this.getTH();
			this.getNxttemp();
		},
		methods: {
			getNxttemp(){
				gettempnext().then(res=>{
					console.log(res);
					this.nxttemp=res.predict;
				})
			},
			//图表渲染
			init() {
				this.chartContainer = echarts.init(this.$refs.chartContainer);
				this.chartContainer.setOption(this.option);
				// console.log(this.echart1);
			},

			// beforeDestroy() {
			// 	// 在组件销毁前停止轮询
			// 	this.stopPolling();
			// },
			startPolling() {
				// 使用定时器设置轮询间隔
				this.timer = setInterval(() => {
					this.fetchData();
				}, 10000); // 间隔时间为 1 min
			},
			// stopPolling() {
			// 	// 停止定时器
			// 	clearInterval(this.timer);
			// },
			fetchData() {

				// 向服务器发送请求，获取数据
				this.getTH();
				// this.getAve();
				setTimeout(() => {
					this.count++;
					// 每次请求成功后增加计数
				}, 1000);

			},
			//获取温度相关数据
			getTH() {
				gettemhum().then(res => {

					//与后端传输
					//进行对情况判断进行提示
					//duration设置提示时长十秒
					if (res.tempCondition == 2) {
						// this.$message.error('温度过高');
						this.$message({
							duration: 10000,
							message: '温度过高',
							type: 'error',
						});
					} else if (res.tempCondition == 0) {
						// this.$message.error('温度过低')
						this.$message({
							duration: 10000,
							message: '温度过低',
							type: 'error',
						});
					} else if (res.tempCondition == 3) {
						// this.$message({
						// 	duration: 10000,
						// 	message: '异常了，请注意硬件设备',
						// 	type: 'error',
						// });
						this.abnormal = res.temp[9];
						this.time = res.time[9];
					}
					//赋值（横坐标为时间）
					this.option.series[0].data = res.temp;
					this.option.xAxis.data = res.time;
					this.chartContainer.setOption(this.option);
					//获取实时温度数据
					this.temp = res.temp[9];
					//计算平均值
					var sum = res.temp[0] + res.temp[1] + res.temp[2] + res.temp[3] + res
						.temp[4] + res.temp[5] + res.temp[6] + res.temp[7] + res.temp[8] +
						res.temp[9];
					// console.log(sum);
					var ave = sum / 10;
					this.average = ave;

				});

			},




		},
	};
</script>

<style scoped>
	.el-row {
		margin-bottom: 20px;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.el-col {
		border-radius: 4px;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}

	.bg-purple {
		background: #a0d175;
	}

	.bg-red {
		background: #ec4042;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.grid-content {
		display: flex;
		align-items: center;
		justify-content: center;
		/* text-align: center; */
		color: #fefefe;
		border-radius: 4px;
		min-height: 36px;
	}

	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}

	.schart-box {
		display: inline-block;
		margin: 20px;
	}

	.schart {
		width: 800px;
		height: 400px;
	}

	.content-title {
		clear: both;
		font-weight: 400;
		line-height: 50px;
		margin: 10px 0;
		font-size: 22px;
		color: #1f2f3d;
	}

	.ave-box {

		border-radius: 5px;
		background: rgba(255, 255, 255, 0.3);
		border-width: thin;
		border-style: solid;
		width: 20%;
		high: 30%;
	}
</style>